<template>
  <div>
    <!--头部-->
    <div>
      <!--顶部登陆-->
      <div class="box">
        <header class="topbox">
          <ul>
            <li v-if="!this.$store.state.userName">
              <span @click="logins()">登陆</span>
              <span class="sp">|</span>
              <span @click="registers()">注册</span>
            </li>
            <li v-if="this.$store.state.userName">
              <span class="hy">欢迎</span>
              <el-popover placement="bottom" width="200" v-model="outli">
                <p>确定退出登录吗</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="outli = false"
                    >取消</el-button
                  >
                  <el-button type="primary" size="mini" @click="delLogin"
                    >确定</el-button
                  >
                </div>
                <el-button slot="reference"
                  ><span>{{ $store.state.userName }}</span></el-button
                >
              </el-popover>
            </li>
            <li @click="myOrder">
              <a href="#">订单列表</a>
            </li>
            <li @click="myCollect">
              <a href="javascript:;">我的收藏</a>
            </li>
            <li class="goshop" @click="shoppingCart">
              <a href="#"><i class="el-icon-shopping-cart-2"></i> 购物车(0)</a>
            </li>
          </ul>
        </header>
      </div>
      <!--导航-->
      <div class="xbox">
        <div class="nav">
          <img src="../../public/logoone.png" alt="" />
          <el-menu :default-active="activeIndex" mode="horizontal" router>
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/allShop">全部商品</el-menu-item>
            <el-menu-item index="/aboutUs">关于我们</el-menu-item>
          </el-menu>
          <el-input class="ipt" placeholder="请输入搜索内容" v-model="search">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchclick"
            ></el-button>
          </el-input>
        </div>
      </div>
    </div>
    <!-- 主要区域 -->
    <el-main>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </el-main>
    <!--底部-->
    <div id="box">
      <div class="text">
        <p href="javascript:;"><span class="sp1"></span> 7天无理由退换货</p>
        <p href="javascript:;"><span class="sp1"></span>满99元全场包邮</p>
        <p href="javascript:;"><span class="sp1"></span>100%品质保证</p>
      </div>
      <div class="cat">
        <img src="../../public/github.png" alt="" />
      </div>
      <p class="footp2">
        <a href="">首页</a>
        <span class="trees">|</span>
        <a href="">全部商品</a>
        <span class="trees">|</span>
        <a href="">关于我们</a>
      </p>
      <p class="footp3">商城版权所有 © 2012-2021</p>
      <span class="sp1"></span>
    </div>
    <!--注册组件-->
    <register-module
      :dialogVisible="dialogVisible"
      @register="register"
      @flagTwo="flagTwo"
    >
    </register-module>
    <!--登陆组件-->
    <login-module ref="loginRef"></login-module>
  </div>
</template>

<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      activeIndex: "/Home",
      search: "",
      dialogVisible: false, //注册框

      outli: false,
    };
  },
  created() {
    // console.log(this.$store.state);
  },
  methods: {
    //点击搜索
    searchclick() {
      this.$router.push({ path: "/allShop", query: { search: this.search } });
      this.search = "";
    },
    //注册
    registers() {
      this.dialogVisible = true;
    },
    register() {
      this.dialogVisible = false;
    },
    flagTwo() {
      this.dialogVisible = false;
    },
    //登陆
    logins() {
      // this.dialogFlag = true;
      this.$refs.loginRef.loginsk();
    },
    elflagOne() {
      // console.log(1234567);
      this.dialogFlag = false;
    },
    elflagTwo() {
      // console.log(12345688);
      this.dialogFlag = false;
    },
    //退出登录
    delLogin() {
      this.$notify({
        type: "success",
        message: "成功退出登陆",
      });
      this.$store.commit("delLogin");
      this.outli = false;
    },
    //点击收藏
    myCollect() {
      this.$router.push("/collect");
    },
    //点击我的订单
    myOrder() {
      this.$router.push("/order");
    },
    //点击我的购物车
    shoppingCart() {
      this.$router.push("/shoppingCart");
    },
  },
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
//顶部样式
.footer {
  margin-top: 30px;
}
.box {
  width: 100%;
  height: 40px;
  background-color: #3d3d3d;
}
.topbox {
  width: 1225px;
  height: 40px;
  display: flex;
  font-size: 14px;
  justify-content: flex-end;
  background-color: #3d3d3d;
  line-height: 40px;
  margin: 0 auto;
  ul {
    list-style: none;
    display: flex;
    li {
      margin: 0 0 0 20px;
      button {
        background: 0 0;
        padding-left: 0;
        padding-right: 0;
        padding: 10px 0;
        border: none;
        color: red;
      }
      span {
        padding: 10px 0;
        color: #b0b0b0;
      }
      .hy {
        padding: 10px 0;
        color: #b0b0b0;
      }
      .hy:hover {
        padding: 10px 0;
        color: #b0b0b0;
      }
      span:hover {
        color: white;
        cursor: pointer;
      }
      a {
        color: #b0b0b0;
        text-decoration: none;
      }
      a:hover {
        color: white;
        cursor: pointer;
      }
    }
    .sp {
      margin: 0 5px;
    }
    .goshop {
      width: 120px;
      text-align: center;
    }
    .goshop:hover {
      background-color: white;
      color: orangered;
      a {
        color: orangered;
      }
      a:hover {
        color: orangered;
        cursor: pointer;
      }
    }
  }
}
//导航栏
.xbox {
  width: 100%;
  margin-top: 40px;
}
//菜单栏
.nav {
  max-width: 1225px;
  height: 61px;
  margin: 0 auto;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
  display: flex;
  align-items: center;
  position: relative;
  img {
    margin-right: 60px;
  }
  .ipt {
    width: 290px;
    position: absolute;
    right: 0px;
  }
}
//底部
#box {
  width: 100%;
  height: 334px;
  background-color: #2f2f2f;
  margin-bottom: 20px;
  .text {
    height: 145px;
    line-height: 145px;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: 1px solid #ccc;
    p {
      display: flex;
      align-items: center;
      color: white;
      font-size: 20px;
      margin: 0 12px;
    }
    .sp1 {
      width: 40px;
      height: 40px;
      padding-top: 5px;
      background-color: red;
      display: inline-block;
      background: url(../../public/us-icon.png) no-repeat;
      background-position: 0px 1px;
    }
  }
  .cat {
    width: 50px;
    height: 50px;
    margin: 20px auto;
  }
  .footp2 {
    font-size: 16px;
    text-align: center;
    color: #888888;
    margin: 20px 0 16px;
    a {
      text-decoration: none;
      color: #888888;
    }
    .trees {
      padding: 0 22px;
    }
  }
  .footp3 {
    font-size: 16px;
    text-align: center;
    color: #888888;
    margin: 20px 0 16px;
  }
}
</style>